<template>
  <div id="flightLayout">
    <div class="item-info clearfix">
      <h3>{{flight.FlightCompany}}</h3>
      <div class="fl">
        <a>
        <ul>
          <li class="flight-code">
            <h4 >{{flight.flightSegmentList[0].flightNo}}</h4>
          </li>
          <li class="flight-name">
            <h3>国航|N73</h3>
          </li>
          <li class="leaved">
           <h3 class="fl" style="margin-right:13px">{{flight.flightSegmentList[0].flightDeptimePlan}}</h3>
            <h3>{{flight.flightSegmentList[0].flightDep}}</h3>
          </li>
          <li class="arrived">
            <h4 class="fl" style="margin-right:13px" >{{flight.flightSegmentList[0].flightArrtimePlan}}</h4>
            <h4>{{flight.flightSegmentList[0].flightArr}}</h4>
          </li>
        </ul>
        </a>
      </div>
      <div class="fr">
        <ul>
          <li><h4>准点率:{{flight.onTimeRate}}</h4></li>
          <li class="price"><span>￥{{flight.basePcPrice}}</span></li>
          <li><h4>会员专享￥ {{flight.mileage}}</h4></li>
          <li><h4>余票充足</h4></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'flight',
    props: ['flight'],
    components: {
    },
    data () {
      return {
        planTime: ''
      }
    },
    mounted: {
      subString () {
        this.planTime = this.$props.flight.flightSegmentList[0].flightDeptimePlan.subString(0, 5)
      }
    }
  }
</script>
<style>
  #flightLayout .item-info {
    padding: 10px 15px;
    border-bottom: 1px solid #dddee1;
  }

  #flightLayout div:hover {
    background:#f8f8f9;
  }

  #flightLayout .item-info .fl ul li {
    width: 150px;
    color: #495060;
  }

  #flightLayout .item-info .flight-code h4 {
    color: #FF0000;
    font-size: 14px;
  }

  #flightLayout .item-info .flight-name h3 {
    line-height: 38px;
  }

  #flightLayout .item-info .fr ul li {
    text-align: right;
    padding-right: 20px;
    color: #FF0000;
  }

  #flightLayout .item-info .fr ul li span {
    font-size: 14px;
  }

  #flightLayout .item-info .fr .price span {
    color: #495060;
    font-size: 24px;
    font-weight: 700;
  }

  .leaved h3:first-child, .arrived h4:first-child {
    overflow: hidden;
    white-space: nowrap;
    width: 41px;
  }
  .arrived h4:first-child {
    width: 31px;
  }

</style>
